import SuperTableVue from "@/components/SuperTable";
import {GetHandlerecordList,SaveOrUpdate,startProcess,DeleteHandlerecord} from "@/service";
import {ElButton} from "element-plus";
import {h} from "vue";
import HandleRecordDetail from "@/components/HandleRecordDetail.vue";

export default new SuperTableVue({
    tableConfig:{
        props:[//表格的列信息
            { prop: 'id', label: '流程实例ID', minWidth: '170'},
            { prop: 'processid', label: '处置流程ID', minWidth: '170'},
            { prop: 'handlestatus', label: '处置状态', minWidth: '90',codeMap:[
                {title:'处置中',value:'0'},
                {title:'已处置',value:'1'}
            ]},
            { prop: 'starttime', label: '处置开始时间', minWidth: '130',timeStampFormat:"YYYY-MM-DD HH:mm:ss" },
            { prop: 'endtime', label: '处置结束时间', minWidth: '130',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
            // { prop: 'handleresult', label: '最终处置结果', minWidth: '100',codeMap:[
            //     {title:'处置通过',value:'1'},
            //     {title:'处置未通过',value:'0'}
            // ],defaultValue:'--'},
            { prop: 'orgname', label: '主体机构名称', minWidth: '100'},
            { prop: 'ywxt', label: '来源业务系统名称', minWidth: '100'},
            { prop: 'handler',label: '操作', minWidth: '150',slot:function(scope){
                return  (
                        <div>
                            <ElButton type="primary" size="small" onClick={()=>this.openDialog({
                                component:HandleRecordDetail,
                                title:'记录详情',
                                props:(closeDialog)=>{
                                    return{
                                        recordid:scope.row.id
                                    }
                                },
                                otherOptions:{
                                    customStyle:{//默认样式
                                        width:'80%',
                                        maxWidth:'100%',
                                        height:'69vh',
                                    }
                                }
                            })}>{()=>'详情'}</ElButton>
                            <ElButton type="warning" size="small" onClick={()=>this.delete(scope.row)}>{()=>'删除'}</ElButton>
                        </div>
                        )
                }
            }
        ],
        getDataFunction:(pagenum,pagesize,queryInfo)=>{//数据初始化方法
            //组参阶段
            let params = {
                pageIndex:pagenum,
                pageSize:pagesize,
                handlestatus:queryInfo.handlestatus,
                id:queryInfo.id,
                begintime:queryInfo.recordtime?.[0],
                endtime:queryInfo.recordtime?.[1]
            }
            return GetHandlerecordList(params).then(res=>{
                if (res.data && res.code == "200") {
                    const querysuccess = true;
                    const totalcount = res.total;
                    const datalist = res.data
                    return ({querysuccess,totalcount,datalist})
                }
            })
        },

    },
    searchConfig:{//搜索区域配置
        slot:function({queryData,resetQueryData}){
            return (
                <div>
                    <ElButton type="primary" onClick={()=>queryData()}>
                        查询
                    </ElButton>
                    <ElButton type="warning" onClick={()=>resetQueryData()}>
                        重置
                    </ElButton>
                    <ElButton type="success" onClick={()=>this.add()}>
                        新增
                    </ElButton>
                </div>
            )
        },
        props: [
            {
                field: 'id',
                type: 'input',
                label: '流程实例ID',
                placeholder: '请输入流程实例ID',
            },
            {
                field: 'handlestatus',
                type: 'select',
                label: '处置状态',
                placeholder: '请选择处置状态',
                options:[
                    {title:'处置中',value:'0'},
                    {title:'已处置',value:'1'}
                ],
            },
            {
                field: 'recordtime',
                type: 'datepicker',
                label: '流程开始时间',
                otherOptions: {
                  startPlaceholder: '开始时间',
                  endPlaceholder: '结束时间',
                  type: 'datetimerange',
                  format:"YYYY-MM-DD HH:mm:ss",
                  valueFormat:"x"
                },
            },
        ],
    },
    rowDeleteConfig:{//如果调用this.delete()方法
        deleteDataFunction:async(row)=>{
            return DeleteHandlerecord({id:row.id}).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },
    rowAddConfig:{//如果调用this.edit()方法,那么会根据这个配置打开默认的编辑界面,如果不用默认的,那这个就不用定义了
        props:async(row)=>{
            return [
                { field: 'orgid', label: '机构id',type: 'input'},
                { field: 'orgname', label: '机构名称',type: 'input' },
                { field: 'processid', label: '流程编号',type: 'input' },
                { field: 'ywxt', label: '业务系统',type: 'input' },
                { field: 'ywxtid', label: '系统id',type: 'input' },
            ]
        },
        addDataFunction:(formdata)=>{
            return startProcess(formdata).then(res=>{
                const ok = res.data && res.code == "200";
                const msg = res?.message;
                return ({ok,msg})
            })
        },
    },

})
























//如果需要在外层包裹
// export default {
//     setup:()=>{
//         return ()=><div style={{padding:'10px',height:'calc(100% - 20px)'}}>
//             {
//                 h(new SuperTableVue({
//                     detailPropList:[//表格的列信息
//                         { prop: 'rolekey', label: '岗位key', minWidth: '150'},
//                         { prop: 'rolename', label: '岗位名称', minWidth: '50',},
//                         { prop: 'remark', label: '备注', minWidth: '130' },
//                         { prop: 'createtime', label: '创建时间', minWidth: '100',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
//                         { prop: 'updatetime', label: '更新时间', minWidth: '100',timeStampFormat:"YYYY-MM-DD HH:mm:ss"},
//                         { prop: 'handler',label: '操作', minWidth: '150'},
//                     ],
//                     showExportExcel:false,
//                     searchConfig:{//搜索区域配置
//                         searchProps: [
//                             {
//                                 field: 'rolename',
//                                 type: 'input',
//                                 label: '岗位名称',
//                                 placeholder: '请输入岗位名称'
//                             },
//                         ]
//                     },
//                     getTableDataFunction:(pagenum,pagesize,queryInfo)=>{//数据初始化方法
//                         //组参阶段
//                         let params = {
//                             pageIndex:pagenum,
//                             pageSize:pagesize,
//                             rolename:queryInfo.rolename
//                         }
//                         return GetRolePermission(params).then(res=>{
//                             if (res.data && res.code == "200") {
//                                 const querysuccess = true;
//                                 const totalcount = res.total;
//                                 const datalist = res.data
//                                 return ({querysuccess,totalcount,datalist})
//                             }
//                         })
//                     }
//                 }))
//             }
//         </div>
//     }
// }
